{% extends "based/based_no_sidebar.html" %}
{% block title %}{{_("个人设置")}}{% endblock %}
{% block content %}
<!-- Date Picker -->
<link href="/admin-pages/static/css/bootstrap-datetimepicker.min.css?v={{g.site_global.site_config.STATIC_FILE_VERSION}}" rel="stylesheet" type="text/css" />
<data id="user_set" content="{{data.set}}" hidden></data>
<div id="app" class="row osr-edit-page">
    <section class="osr-panel">
        <header class="panel-heading tab-bg-dark-navy-blue osr-panel-heading">
            <ul class="nav nav-tabs">
                <li id="head_li_basis">
                    <a data-toggle="tab" data-target="#basis" class="osr-pointer" onclick="switch_type('basis')">
                        <i class="fa fa-list-alt"></i> {{_("基础设置")}}
                    </a>
                </li>
                <li id="head_li_profile">
                    <a data-toggle="tab" data-target="#profile" class="osr-pointer" onclick="switch_type('profile')">
                        <i class="fa fa-vcard"></i> {{_("个人资料")}}
                    </a>
                </li>
            </ul>
        </header>
        <div id="basis">
            {% include 'own/account/settings/_basis.html' %}
        </div>
        <div id="profile">
            {% include 'own/account/settings/_profile.html' %}
        </div>
    </section>
</div>
<script src="/admin-pages/static/js/plugins/bs-datetimepicker/bootstrap-datetimepicker.min.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}" type="text/javascript"></script>
<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
            user_profile:{
                avatar_url:{}
            },
            birthday:null,
            set:"profile",
            input_domain:""
            }
    })

    // 页面一加载完就自动执行
    $(document).ready(function(){
          var set = $("#user_set").attr("content");
          vue.set = set?set:vue.set;
          nav_active("head_li_"+vue.set, vue.set);
          get_profile();
    });

    function switch_type(set){
        vue.set = set;
        get_profile();
    }
    function get_profile(){

         if(vue.set != "basis"){
            $("#user-basis").hide();
            $("#user-profile").show();
         }else{
            $("#user-profile").hide();
            $("#user-basis").show();
         }

         var result = osrHttp("GET","/api/account/profile",{}, args={not_prompt:true});
        result.then(function (r) {
              vue.user_profile = r.data.user;
              vue.birthday = r.data.user.birthday;

              var email_list = vue.user_profile.email.split("@");
              vue.user_profile.email = email_list[0].slice(0,3)+"****"+email_list[0].slice(-3)+"@"+email_list[1];
              if(!vue.birthday){
                vue.birthday = get_now_format_date();
              }else{
                  var y = parseInt(vue.birthday/10000);
                  var m = parseInt(vue.birthday/100)%100
                  if (m < 10){
                    m = "0" + m;
                  }
                  var d = vue.birthday%100;
                  if (d < 10){
                    d = "0" + d;
                  }
                  vue.birthday = y+'-'+m+'-'+d;
              }
        });

      var url = window.location.pathname+"?set="+vue.set;
      if(vue.set=="profile" || !vue.set){
            var title= "{{_('个人资料')}}"

      }else{
            var title= "{{_('基础设置')}}"
      }
      history_state(title+"-{{g.site_global.site_config.TITLE_SUFFIX}}", url);
    }

    function ready_add_domain(){
        if(vue.input_domain){
            vue.input_domain = 0;
        }else{
            vue.input_domain = 1;
        }
    }


</script>
{% endblock %}